<template>
  <div>
    <el-checkbox label="全部"
                 :indeterminate="isIndeterminate"
                 @change="typeAllChange"
                 name="selectAll" v-model="selectAll"></el-checkbox>
    <el-checkbox-group v-model="model" @change="typeChange">
      <el-checkbox :label="item.value"
                   v-for="item in formatCheckList"
                   :key="item.value">
        {{item.title}}
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
  export default {
    name: "checkbox-all",

    props: ['value', 'checkList'],

    data() {
      return {
        selfModel: this.value,
        isIndeterminate: false,
        // selectAll: false,
      }
    },

    computed: {
      formatCheckList() {
        return _.filter(this.checkList, (check) => check.value !== consts.ALL)
      },
      model: {
        get() {
          return this.value
        },
        set(val) {
          this.selfModel = val;
          this.$emit('input', val)
        }
      },
      selectAll:{
        get() {
          return this.value.length === this.checkList.length ? true :false
        },
        set(val) {
         this.typeAllChange(val)
        }
        
      }
    }, 

    methods: {
      typeAllChange(val) {
        this.model = val ? _.map(this.formatCheckList, 'value') : [];
        this.isIndeterminate = false;
      },

      typeChange(value) {
        let checkedCount = value.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.formatCheckList.length;
      },
    }
  }
</script>

<style scoped>

</style>
